<template>
  <ul class="nav-bar fool">
    <li :class="['barIcon','home',$route.name==='index'?'active':'']" @click="$router.push('/index')"></li>
    <li :class="['barIcon','commission',$route.name==='search'?'active':'']" @click="$router.push('/search')"></li>
    <li :class="['barIcon','cart',$route.name==='cart'?'active':'']" @click="$router.push('/cart')"></li>
    <li :class="['barIcon','myHome',$route.name==='home'?'active':'']" @click="$router.push('/home')"></li>
  </ul>
</template>

<script>
  export default {
    name: 'footertab',
    data() {
      return {

      }
    },
    watch: {},
    components: {},
    computed: {},
    methods: {}

  }

</script>
<style lang='scss' scoped>
  .nav-bar {
    position: fixed;
    width: 10rem;
    margin: 0 auto;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1.35rem;
    padding: .066667rem 0 0;
    background: #fff;
    overflow: hidden;
    clear: both;
    box-shadow: 0px 0px 20px -8px #999;
    display: flex;
    flex: 1;
    z-index: 5000;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    border-top: 1px solid #eee;
    .barIcon {
      list-style: none;
      width: 2.5rem;
      height: 100%;
      cursor: pointer; //  
      background: url('~assets/common/images/navbar.png') 0 0 no-repeat;
      background-size: 500% 120%;
    }
    .home {
      background-position: .47rem -0.1rem;
      &.active {
        background-position: -1.1rem -0.1rem;
      }
    }
    .commission {
      background-position: -2.63rem -0.1rem;
      &.active {
        background-position: -4.2rem -0.1rem;
      }
    }
    .cart {
      background-position: -5.8rem -0.1rem;
      &.active {
        background-position: -7.33rem -0.1rem;
      }
    }
    .myHome {
      background-position: -8.9rem -0.1rem;
      &.active {
        background-position: -10.46rem -0.1rem;
      }
    }
  }

</style>
